<template>
    <div>
        {{obj.name}}
        <hr>
        <ul>
            <li v-for="item in list">{{item.name}}</li>
        </ul>
        <input type="button" value="添加" @click="add">
        <hr>
        <input type="text" v-model="obj.name"></input>
        <input type="button" value="打印" @click="printObj">
        <hr>添加行
        <div v-for="item in list">
            <input type="text" v-model="item.name" ></input> <input type="button" value="添加" @click="addObj">
        </div>
        <input type="button" value="保存" @click="save">
    </div>
</template>

<script>
    export default {
        name: "VueTest",
        data() {
            return{
                obj:{
                    id:1,
                    name:'张三'
                },
                list:[{id:1, name:'张三'},{id:2,name:'李四'}]
            }
        },
        methods:{
            add() {
                console.log("add...")
                this.list.push({id:3,name:"王五"})
                this.obj.name="果果";
                console.log("add")
            },
            printObj() {
                console.log(this.obj)
            },
            addObj(){
                this.list.push({})
            },
            save() {
                this.axios.post('http://localhost:8081/list',{myCourses:this.list}).then(res=>{
                    console.log(res)
                })
            }

        },
        created() {
            console.log("vue test init ..");
            this.axios.post('http://localhost:8081/list',{}).then(res=>{
                this.list = res.data;
            })
        }
    }
</script>

<style scoped>

</style>